<%--
  Created by IntelliJ IDEA.
  User: xuweijie
  Date: 17-5-17
  Time: 下午7:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Register</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${style}/front/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="${style}/animate.min.css">
    <link rel="stylesheet" type="text/css" href="${style}/input.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${style}/front/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${style}/front/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${style}/front/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${style}/front/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${style}/front/fw.css" media="screen">

    <link rel="stylesheet" type="text/css" href="${style}/input.css">
</head>
<body>
<%--herder--%>
<jsp:include page="../header.jsp"/>

<section class="m-t-0">
    <div class="container m-t-30">
        <h3 class="title f-30">个人中心</h3>
        <%--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>--%>
        <div class="row ht-tabs ht-tabs-product">
            <div class="col-md-3 col-lg-2 pull-left-xs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="panel panel-default">
                        <a href="/front/mybuycar/buycarlist">购物车</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">我的订单</a>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li>
                                    <a href="/front/purchase/alls">全部</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/waits">待付款</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/payed">待发货</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/sent">待收货</a>
                                </li>
                                <li>
                                    <a href="/front/purchase/done">已完成</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">优惠券</a>
                        <div id="collapse2" class="panel-collapse collapse in">
                            <ul class="panel-body">
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetail">全部优惠券</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/mycoupons/showdetailbyMycoupons">我的优惠券</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="panel panel-default">
                        <a href="/front/wallet">我的钱包</a>
                    </li>
                    <li class="panel panel-default">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">个人信息管理</a>
                        <div id="collapse4" class="panel-collapse collapse in">
                            <ul class="panel-body" >
                                <li role="presentation">
                                    <a href="/front/persion/showMyInfo">我的信息</a>
                                </li>
                                <li role="presentation" class="active">
                                    <a href="/front/address/showaddress">地址管理</a>
                                </li>
                                <li role="presentation">
                                    <a href="/front/persion/showupdatepwd">修改密码</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-md-9 col-lg-10">
                <!-- 主要显示区域-->
                <div class="content" style="margin-bottom: 200px;">
                    <button style="margin-bottom: 15px;margin-left: 15px;" type="button" flag="0" class="btn btn-lg btn-success insertaddress" data-toggle="modal" data-target="#updateModal">添加新地址</button><br><br>
                    <c:if test="${fn:length(croAddresses)==0}">
                        暂无收货地址
                    </c:if>
                    <c:if test="${fn:length(croAddresses)!=0}">
                        <c:forEach items="${croAddresses}" var="address">
                            <div class="panel-heading" style="background: #f7f7f7;">
                                <span class="label label-success" style="font-size: 18px;">${address.consignee}&nbsp;&nbsp;&nbsp;&nbsp;${address.country.name}</span>
                                <div style="float: right;">
                                    <button type="button" addrid="${address.id}" flag="1" class="btn btn-primary btn-xs updateaddress" data-toggle="modal" data-target="#updateModal">编辑</button>
                                    <button type="button" addrid="${address.id}" class="btn btn-danger btn-xs deladdress">删除</button>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-body" style="margin-left: 20px;">
                                    <br><font style="color: #959595;font-size: large;">收货人：</font><font style="font-size: large" class="fconsignee">${address.consignee}</font><br>
                                    <font style="color: #959595;font-size: large;">所在地区：</font><font style="font-size: large" class="farea">${address.country.name}&nbsp;&nbsp;${address.provience.name}&nbsp;&nbsp;${address.city.name}</font><br>
                                    <font style="color: #959595;font-size: large;">详细地址：</font><font style="font-size: large" class="faddress">${address.address}</font><br>
                                    <font style="color: #959595;font-size: large;">联系方式：</font><font style="font-size: large" class="fphone">${address.phone}</font><br>
                                    <font style="color: #959595;font-size: large;">邮政编码：</font><font style="font-size: large" class="fpostcode">${address.postcode}</font><br>
                                </div>
                            </div>
                        </c:forEach>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
    <%--模态框样式--%>
    <div hidden class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">收货地址</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" method="post" action="/front/persion/updatecusdata">
                        <input hidden type="text" class="flag" value="">
                        <input hidden type="text" class="addrid" value="">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收件人</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="upconsignee" type="username" name="username"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所在地区</label>
                            <div class="col-sm-10 selectList ">
                                <select class="country">
                                    <option>请选择</option>
                                </select>
                                <select class="provience">
                                    <option>请选择</option>
                                </select>
                                <select class="city">
                                    <option>请选择</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="upaddress" type="username"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">联系方式</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="upphone" name="upphone" type="username"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮政编码</label>
                            <div class="col-sm-10">
                                <input class="form-control" id="uppostcode" name="uppostcode" type="username"
                                       value="">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary upmodel">提交</button>
                </div>
            </div>
        </div>
    </div>
</section>

<%--footer--%>
<jsp:include page="../footer.jsp"/>

<!-- jQuery -->
<script src="${jquery}/jquery.js" charset="utf-8"></script>

<!-- JqueryUI -->
<script src="${jquery}/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${Bootstrap}/js/bootstrap.js"></script>
<!-- Owl-coursel -->
<script src="${Js}/front/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${Js}/front/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${Js}/front/script.js"></script>
<script src="${Js}/front/persion/address.js"></script>
<script text="type/javascript" src="${Js}/front/input.js"></script>
<script>
    $(function(){
        $(".selectList").each(function(){
            var areaJson= eval(${areajson});
            console.log(areaJson);
            var temp_html;
            var oCountry = $(this).find(".country");
            var oProvince = $(this).find(".provience");
            var oCity = $(this).find(".city");
            //初始化国家
            var country = function(){
                $.each(areaJson,function(i,country){
                    temp_html+="<option value='"+country.id+"'>"+country.name+"</option>";
                });
                oCountry.html(temp_html);
                province();
            };
            //赋值省份
            var province = function(){
                temp_html = "";
                var n = oCountry.get(0).selectedIndex;
                $.each(areaJson[n].proviences,function(i,province){
                    temp_html+="<option value='"+province.id+"'>"+province.name+"</option>";
                });
                oProvince.html(temp_html);
                city();
            };
            //赋值城市
            var city = function(){
                temp_html = "";
                var m = oCountry.get(0).selectedIndex;
                var n = oProvince.get(0).selectedIndex;
                if(typeof(areaJson[m].proviences[n].citylist) == "undefined"){
                    oCity.css("display","none");
                }else{
                    oCity.css("display","inline");
                    $.each(areaJson[m].proviences[n].citylist,function(i,city){
                        temp_html+="<option value='"+city.id+"'>"+city.name+"</option>";
                    });
                    oCity.html(temp_html);
                };
            };
            //选择国家改变省份
            oCountry.change(function(){
                province();
            });
            //选择省份改变城市
            oProvince.change(function(){
                city();
            });
            country();
        });
    });

</script>
</body>
</html>

